<style>
    .select-form-header{
        position: relative;
    }
    .card-header-right{
        position: absolute;
        right: 0;
        top: 0;
    }
    .layui-card .layui-tab{
        margin-top: 13px;
        z-index: 9999;
    }
    .layui-tab-card>.layui-tab-title{
        background: #fff;
    }
    .layui-tab-card{
        border-top: none;
    }
    .select-form-box{
        padding: 10px 10px 0 15px;
        min-height: 400px;
    }
    .layui-card:last-child{
        margin-bottom: 20px;
    }
    .layui-this{
        border-top: 2px solid #008AE1;
    }
    .layui-tab-content{
        padding: 15px 9px 32px 9px;
        overflow-x: auto;
    }
    .layui-table tbody tr.bgRed{
        background: red;
    }
    .task-btn-group{
        margin-bottom: 5px;
    }
    .layui-btn-pass, .layui-btn-back, .layui-btn-detail {
        height: 22px;
        padding: 0 8px;
        border: 1px solid #1C74D4;
        border-radius: 4px;
        background-color: transparent;
        color: #0078FF;
    }
    .layui-table-cell{
        height: inherit;
        line-height: 27px;
    }
    .form-tab-content .layui-table-cell{
        height: 27px;
    }
    .layui-table-view .layui-table{
        width:100%;
    }
    .layui-badge{
        height: 19px;
        line-height: 21px;
        border-radius: 9px;
        padding: 0 16px;
    }
    .layui-table-box .layui-table[lay-even] tbody tr.lineactive{
        background-color: #FDE7A3;
    }
    .btn-colla{
        height: 30px;
        line-height: 30px;
        border: none;
    }
    .btn-colla .layui-icon{
        right: 7px;
    }
    #usermemo{
        overflow: hidden;
    }
    #usermemo .layui-form-label{
        width: auto;
        padding:  9px 10px;
    }
    .layui-layer-btn .layui-layer-btn0{
        background-color: #2669B1;
        border-color: #2669B1;
    }
    .kqform-content {
        overflow: auto;
    }
    .kq-info-title {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        margin-right: 30px;
    }
    .task-chartpoup-content .layui-table thead tr th {
        white-space:nowrap;
        vertical-align: middle;
    }
    .layui-table tbody tr:nth-child(odd) {
        background-color: #FFFFFF;
    }
    .layui-table tbody tr:nth-child(even) {
        background-color: #F9F9F9;
    }
    .layui-table tbody tr:hover{
        background-color: #f2f2f2; 
    }
    .layui-btn-urge{
        width: 65px;
        margin-left: 13px;
        background-color: #2669B1;
    }
    .task-chartpoup-content .layui-table th, .task-chartpoup-content .layui-table td{
        text-align: center;
    }
    .task-chartpoup-content .layui-tab-item{
        height: 320px;
        overflow-x: scroll;
    }
    /* 下载附件的样式 */
    .dataFill-upload{  
        word-wrap: break-word;
        white-space: pre-wrap;
        word-break: break-all;
        max-width: 100%;
        height: auto;
        overflow: hidden;
        color: #23559D;
    }
    .upLoadSucessBox{
        position: absolute;
        left: 14%;
        top: 26px;
        background: #000;
        display: none; 
        z-index: 9999;
        color: #fff;
    } 
    .upLoadSucessBox>div{
        padding: 3px 6px;
    }
    .upLoadSucessBox>div>span:nth-child(1){
        cursor: pointer;
    }
    .upLoadSucessBox>div>span:nth-child(1):hover{
        color: #8ca8c7; 
        text-decoration: underline;
    }
</style>
<script type="text/html" template lay-done="layui.data.chartPoupDone(d);">
    <div class='task-chartpoup-content'>
        {{#
            var show = d.params.args.state === '40' ? 'block' : 'none';
        }}
        <form class="layui-form" action="" lay-filter="doneForm" style="margin-top: 10px; display:{{ show }}">
            <div class="layui-inline">
                <label class="layui-form-label">催办内容：</label>
                <div class="layui-input-inline">
                    <textarea name="memo" style="width: 450px;height: 50px;min-height:50px;" placeholder="请输入催办内容" class="layui-textarea urge-textarea"></textarea>
                </div>
            </div>
            <div class="layui-inline" style="margin-left: 30px;">
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-urge" lay-filter="getDone" data-target="urge">
                        <i class="layui-icon layui-icon-add-1"></i>催办
                    </button>
                </div>
            </div>
        </form>
        <div class="layui-card">
            <div class="layui-card-header clearfix select-form-header">
                <div class="card-header-left left layui-hide">
                    已催办0次
                </div>
                <div class="card-header-right right card-header-kq hide">
                    <div class="kq-info-title">
                        <span>填报单位：</span><span class="c-unit"></span>&nbsp;&nbsp;
                        <span>考勤日期：</span><span class="c-startDate"></span>~<span class="c-endDate"></span>
                    </div>
                </div>
              </div>
            <div class="layui-card-body layui-form" style="padding: 0 15px;">
                <div id="task-other-form" class="layui-tab layui-form layui-tab-brief otherForm-content" lay-filter='tabSwitch'></div>
                <div id="task-chartpoup-kqform" class="kqform kqform-content"></div>
            </div>
        </div>
    </div>
</script> 
<!-- 下载附件 --> 
<script type="text/html" id="fileUploadTem"> 
    <div class="dataFillfileBox">
        <a href="javascript:void(0)" class="dataFill-upload">下载附件</a>
        <div class="upLoadSucessBox"></div>
    </div>
</script>
<!-- 常驻任务和临时任务表格 -->
<script type="text/html" id="lsczTaskTable">
    
    {{# if(d && d.length >0) { }} 
    <ul class="layui-tab-title">
        {{# layui.each(d, function(index, item){ 
            var showThis = item.showThis ? 'layui-this' : '';
        }}
            <li class="{{showThis}}">{{item.formname}}</li>
        {{# }); }}
    </ul>
    <div class="layui-tab-content">
        {{# layui.each(d, function(index, item){ 
            var showThis = item.showThis ? 'layui-show' : '';
            var dataFillfiles=item.files; 
                var newFileDataArrObj={}; 
                if(JSON.stringify(dataFillfiles)!='{}'){   
                    newFileDataArrObj={};
                    for(var fileKey in dataFillfiles){  
                        newFileDataArrObj[fileKey.split("@")[0]]={fileArr: dataFillfiles[fileKey]};
                        newFileDataArrObj[fileKey.split("@")[0]].filsh=fileKey.split("@")[1];
                    }  
                }
        }}
            <div class="layui-tab-item {{showThis}}">
                {{# if(item.deptMsgs && item.deptMsgs.length > 0){ }}
                    <div>
                        {{# layui.each(item.deptMsgs, function(j, dtem){ }}
                            <input type="radio" name="dept{{index}}" value="{{dtem.dept_id}}" title="{{dtem.dept_name}}" data-index="{{index}}" lay-filter="custom-unit-radio" {{dtem.checked ? "checked" : ""}}/>
                        {{# }) }}
                    </div> 
                {{# } }}
                <table class="layui-table">
                    <thead>
                        {{# if(item.cols && item.cols.length > 0){ }}
                            {{# layui.each(item.cols, function(index, col){ }}
                                <tr>
                                    {{# layui.each(col, function(cndex, ctem){ }}
                                        <th colspan="{{ctem.colspan ? ctem.colspan : '1'}}" rowspan="{{ctem.rowspan ? ctem.rowspan : '1'}}">{{ctem.title}}</th>
                                    {{# }) }}
                                </tr>
                            {{# }) }}
                        {{# } }}
                        
                    </thead>
                    <tbody>
                        {{# if(item.data.grid && item.data.grid.length > 0) {
                            layui.each(item.data.grid,function(gdex,gtem) {  }} 
                                <tr>
                                    {{# layui.each(item.form_field,function(hdex,htem) {}} 
                                        {{# if(htem.type){ }}
                                            <td>{{gdex+1}}</td>
                                        {{# }else if(htem.toolbar){ }}
                                            <td><a class="layui-icon layui-icon-form my-table-btn-check" data-id={{gtem.id}} lay-tips="查看记录"></a></td>
                                        {{# }else if(newFileDataArrObj[gtem.dataid]&&newFileDataArrObj[gtem.dataid].filsh==htem.fieldenglish){  }}   
                                            <td>
                                                <div class="dataFillfileBox">
                                                    <a href="javascript:void(0)" class="dataFill-upload">下载附件</a>
                                                    <div class="upLoadSucessBox">
                                                        {{# layui.each(newFileDataArrObj[gtem.dataid].fileArr,function(flieIndex,fileItem) {}} 
                                                        <div fileId={{fileItem.id}} dataid={{fileItem.dataid}}  fieldenglish={{fileItem.fieldenglish}} servername={{fileItem.servername}} >
                                                            <span  class="DataFilldownLoadFile">{{fileItem.filename}}</span>
                                                        </div>
                                                        {{# }) }}
                                                    </div>
                                                </div>
                                            </td>
                                            
                                        {{# }else{ }}   
                                            <td>{{gtem[htem.fieldenglish]}}</td>
                                        {{# } }}
                                    {{# }) }}
                                </tr>
                        {{# 
                            })
                            }else {
                        }}
                        {{# var count = 0;if(item.cols){ }}
                            {{# layui.each(item.cols[0], function(i, col){
                                col.colspan ? count += parseInt(col.colspan) : count += 1;
                            }) }}
                        {{# } }}
                        <tr>
                            <td colspan="{{count}}" style="text-align: center;">暂无数据</td>
                        </tr>
                        {{#
                            }
                        }}
                    </tbody>
                </table>
            </div>
        {{# }) }}
    </div>
    {{# } else{ }}
        <div style="width: 100%;text-align: center;">暂无填报表单</div>
    {{# } }}
</script> 
<script>
layui.data.chartPoupDone = function (d) {  
    layui.use(['admin','element', 'form', 'tools'], function(){
        var admin = layui.admin,
            info = d.params.info,
            args = d.params.args,
            view = layui.view,
            laytpl = layui.laytpl,
            form = layui.form,
            tools = layui.tools,
            element = layui.element,
            checking = args.checking;

        form.render(null, 'doneForm');
        renderClassifyForm();  
        $(".layui-btn-urge").click(function(){  
            var memo = $('.task-chartpoup-content').find('textarea[name="memo"]').val();
            if(memo === '') { layer.msg('请先输入备注'); return false; }
            admin.req({
                url: 'myapi/DC/api/rest/web/custom/Pressdo',
                type: 'post',
                data: {
                    model: 'add',
                    taskid: info.taskid,
                    writeid: info.id,
                    memo: memo
                },
                done: function(res){
                    if(res.retcode == '0'){
                        $('.urge-textarea').val('');
                        layer.msg('催办成功', {time: 1000});
                    }
                }
            })
            return false;
        })
        // $('.task-chartpoup-content').delegate('click', '.layui-btn-urge', function(e) { 
        //     e.stopPropagation(); 
        //     var memo = $('.task-chartpoup-content').find('textarea[name="memo"]').val();
        //     if(memo === '') { layer.msg('请先输入备注'); return false; }
        //     admin.req({
        //         url: 'myapi/DC/api/rest/web/custom/Pressdo',
        //         type: 'post',
        //         data: {
        //             model: 'add',
        //             taskid: info.taskid,
        //             writeid: info.id,
        //             memo: memo
        //         },
        //         done: function(res){
        //             if(res.retcode == '0'){
        //                 $('.urge-textarea').val('');
        //                 layer.msg('催办成功', {time: 1000});
        //             }
        //         }
        //     })
        //     return false;
        // });

        //查看记录layui-layer-content 
        $('.task-chartpoup-content').delegate('.my-table-btn-check', 'click',function() { 
            var dataId = $(this).data('id');
            admin.req({
                url: 'myapi/DC/api/rest/web/custom/GainHistory',
                data: { id: dataId },
                done: function(res){
                    if(res.retcode == '0'){
                        if(res.data && res.data.length > 0){
                            var taskrecode = layer.open({
                                id: 'temporary-addhtml',
                                title:'<i class="formFill-icon"></i><span style="color:#FFF;">查看记录</span>',
                                offset: '110px',
                                type: 1,
                                resize: false,
                                shadeClose: true,
                                area: ['700px', '450px'],
                                success: function(lay, index){
                                    view(this.id).render('./task/temporary/history', {history: res.data});
                                }
                            });
                        }else{
                            layer.msg('暂无记录', {time: 1500});
                        }
                    }
                }
            });
        }); 
        //表单加载判断
        function renderClassifyForm(){
            if(checking === '1') {
                pickTypeShow('kqform');
                getKqTaskForm(info.id, info.taskid, info.link);
            }else {
                pickTypeShow('other');
                getTaskFormDone(info.id, info.taskid, info.link);
            }
        }
        //鼠标移入事件
        $(".layui-layer-content").delegate(".dataFillfileBox","mouseover",function(){
            $(this).find(".upLoadSucessBox").show();  
        })
        $(".layui-layer-content").delegate(".dataFillfileBox","mouseout",function(){
            $(this).find(".upLoadSucessBox").hide();  
        })  
        //下载文件删除文件点击操作 
        $(".layui-layer-content").delegate(".DataFilldownLoadFile","click",function(e){//下载 
            e.stopPropagation();
			e.preventDefault(); 
            tools.downLoadfunction("myapi/DC/api/rest/web/custom/downWriteFile",{id:$(this).parent().attr("fileid"),access_token: layui.data('layuiAdmin').access_token},"download")
        })
        //下载多文件 
        $(".layui-layer-content").delegate(".dataFill-upload","click",function(e){//下载 
            e.stopPropagation();
            e.preventDefault();
            var downloadp={
                dataid:$(this).siblings().children().eq(0).attr("dataid"),
                fieldenglish:$(this).siblings().children().eq(0).attr("fieldenglish"),
                access_token: layui.data('layuiAdmin').access_token
			}     
            tools.downLoadMutipleDataFun("myapi/DC/api/rest/web/custom/downWriteFile",downloadp);
        })

        //考勤任务表格详情加载
        function getKqTaskForm(id, taskid, link) {
            admin.req({
                url: 'myapi/DC/api/rest/web/custom/IssueGetFormDataByTaskid',
                type: 'post',
                data: {
                    id: id, 
                    taskid: taskid,
                    link: link,
                    checking: '1'
                },
                success: function(res) {
                    var data = res.data.data;
                    renderKqTable(data, taskid);
                    $('.kq-info-title .c-unit').text(data.dept_name ||' 暂无');
                    $('.kq-info-title .c-startDate').text(data.starttime || ' 暂无');
                    $('.kq-info-title .c-endDate').text(data.endtime || ' 暂无');
                }
            });
        }

        function renderKqTable(data, taskid) {
            var dates = data.users.length > 0 ? data.users[0].users_time[0].users_time_day : [],
                users = data.users;
            view('task-chartpoup-kqform').render('./task/components/kqTable', {
                dates: dates, 
                users: users,
                basic: {
                    dept_code: data.dept_code,
                    dept_name: data.dept_name,
                    dept_id: data.dept_id,
                    taskid: taskid
                }
            });
        }
        
         
        //填报表单详情列表加载
        function getTaskFormDone(id, taskid, link, deptId, tabIndex){
            var deptId = deptId ? deptId : '',
                tabIndex = tabIndex ? tabIndex : 0;
            admin.req({
                url: 'myapi/DC/api/rest/web/custom/GetFormDataByTaskid',
                type: 'post',
                data: {
                    id: id, 
                    taskid: taskid,
                    link: link,
                    dept_id: deptId
                },
                success: function(res) { 
                    if(res.retcode == '0'){
                        var data = res.data;
                        var shiftFields = [{ type:'numbers', fieldname: '序号' },{ fieldenglish: 'statename', fieldname: '状态' }];
                        var appendFields = [{ toolbar: '#modify_form' }];
                        $.each(data, function(index, item){
                            var newField = shiftFields.concat(item.form_field).concat(appendFields);
                            item.showThis = tabIndex == index ? true : false;
                            item.form_field = newField;
                        });
                        setUnitRadios(data, deptId, tabIndex);
                        var getTpl = lsczTaskTable.innerHTML,
                            viewHtml = document.getElementById('task-other-form');
                        laytpl(getTpl).render(data, function(html){
                            viewHtml.innerHTML = html;
                        });
                        form.render('radio', 'tabSwitch');
                    }
                }
            });
        }

        //设置填报表单单位单选框
        function setUnitRadios(data, checkId, index){
            var deptMsgs = data[index].deptMsgs;
            layui.each(data, function(hndex, htem){
                htem.deptMsgs && htem.deptMsgs.length > 0 && htem.deptMsgs[0].dept_name != '全部' ? htem.deptMsgs.unshift({dept_name: '全部', dept_id: '', checked: true}) : '';
            });
            if(deptMsgs && deptMsgs.length > 0){
                layui.each(deptMsgs, function(index, item){
                    item.checked = false;
                    item.dept_id == checkId ? item.checked = true : '';
                });
            }
        }

        //不同任务类型做不同的元素切换
        function pickTypeShow(type) {
            if(type === 'other') {
                $('.otherForm-content').show();
                $('.kqform-content').hide();
                $('.card-header-kq').hide();
            }else if(type === 'kqform') {
                $('.otherForm-content').hide();
                $('.kqform-content').show();
                $('.card-header-kq').show();
            }
        }

         //监听单位单选框单选
        form.on('radio(custom-unit-radio)', function(data){
            var tabIndex = data.elem.getAttribute('data-index');
            getTaskFormDone(info.id, info.taskid, info.link, data.value, tabIndex);
        });
    });
}
</script>